<template>
  <div class="pagination-wrapper">
    <div class="">
      <span>总共{{ props.total }}条数据</span>
    </div>
    <div class="flex items-center">
      <div class="w-[114px] mr-[16px]">
        <n-select
          :options="shownPaginationOpts"
          :value="props.pageSize"
          @update:value="handleChangePageSize"
        />
      </div>
      <div>
        <n-pagination v-bind="props" @update:page="handleChangePage" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { get, cloneDeep } from "lodash-es";
import { DEFAULT_PAGINATION_OPTS } from "./data";
import { IBasicPaginationProps } from "./props";

const emits = defineEmits(["changePage", "changePageSize"]);

const props = defineProps<IBasicPaginationProps>();

const shownPaginationOpts = computed(() => {
  let paginationOpts = get(props, "paginationOpts") || [];
  if (!paginationOpts.length) {
    paginationOpts = cloneDeep(DEFAULT_PAGINATION_OPTS);
  }
  return paginationOpts;
});
const handleChangePage = (page: number) => {
  emits("changePage", page);
};

const handleChangePageSize = (pageSize: number) => {
  emits("changePageSize", pageSize);
};
</script>
<style lang="scss" scoped>
.pagination-wrapper {
  @apply flex justify-between items-center mt-[16px];
}
</style>
